import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/project", // 项目中的按钮或者优化
    name: "project",
    meta: {
      title: "项目中的案例或者优化",
    },
    redirect: "/project/demo-1",
    children: [
      {
        path: "demo-1",
        name: "demo-1",
        meta: {
          title: "渲染大量数据的优化(requestAnimationFrame)",
        },
        component: () => import("@/views/project/demo-1.vue"),
      },
      {
        path: "demo-2",
        name: "demo-2",
        meta: {
          title: "Vue3中computed场景",
        },
        component: () => import("@/views/project/demo-2.vue"),
      },
      {
        path: "demo-3",
        name: "demo-3",
        meta: {
          title: "Vue3中computed场景",
        },
        component: () => import("@/views/project/demo-3.vue"),
      },
      {
        path: "demo-4",
        name: "demo-4",
        meta: {
          title: "Object.freeze冻结对象的运用",
        },
        component: () => import("@/views/project/demo-4.vue"),
      },
    ],
  },
  {
    path: "/study-tool",
    name: "study-tool",
    meta: {
      title: "学习工具",
    },
    redirect: "/study-tool/inspect",
    children: [
      {
        path: "inspect",
        name: "inspect",
        meta: {
          title: "vite-plugin-inspect工具",
        },
        component: () => import("@/views/study-tool/inspect.vue"),
      },
    ],
  },
  {
    path: "/style-css",
    name: "style-css",
    meta: {
      title: "css学习及案例",
    },
    redirect: "/style-css/initial",
    children: [
      {
        path: "initial",
        name: "initial",
        meta: {
          title: "initial样式",
        },
        component: () => import("@/views/style-css/initial.vue"),
      },
    ],
  },
];

const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes,
});

export default router;
